<template>
	<view class="collect-info">
		<u-form labelPosition="top" :model="formData" :rules="rules" labelWidth="240rpx" ref="form">
			<u-form-item label="姓名" prop="name" required borderBottom>
				<u-input v-model="formData.name" placeholder="请输入" border="none" />
			</u-form-item>
			<u-form-item label="性别" prop="gender" required borderBottom>
				<view @click="showGenderPicker = true" class="flex-between">
					<u-text :text="formData.gender" v-if="formData.gender" color="#303133"></u-text>
					<u-text text="请选择" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker :show="showGenderPicker" :columns="columns.gender" @confirm="confirmPicker($event, 'gender')"
					@cancel="showGenderPicker = false" />
			</u-form-item>
			<u-form-item label="手机号" prop="phone" required borderBottom>
				<u-input v-model="formData.phone" placeholder="请输入" border="none" type="number" />
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom>
				<u-input v-model="formData.age" placeholder="请输入" border="none" type="number" />
			</u-form-item>
			<u-form-item label="身份证" prop="idcard" borderBottom>
				<u-input v-model="formData.idcard" placeholder="请输入" border="none" type="idcard" />
			</u-form-item>
			<u-form-item label="是否已投保险" prop="insurance">
				<view @click="showInsurancePicker = true" class="flex-between">
					<u-text :text="formData.insurance" v-if="formData.insurance" color="#303133"></u-text>
					<u-text text="请选择" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker :show="showInsurancePicker" :columns="columns.insurance"
					@confirm="confirmPicker($event, 'insurance')" @cancel="showInsurancePicker = false" />
			</u-form-item>
		</u-form>

		<view style="margin-top: 30rpx;">
			<u-text text="请填写真实信息，方便工作人员联系" color="#999" size="24rpx"></u-text>
		</view>

		<view class="bottom-add-btn">
			<u-button text="提交" shape="circle" @click="submit"
				color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: ''
				},
				rules: {
					name: {
						required: true,
						message: '请输入姓名',
						trigger: ['change'],
					},
					gender: {
						required: true,
						message: '请选择性别',
						trigger: ['change'],
					},
					phone: {
						required: true,
						message: '请输入手机号',
						trigger: ['change'],
					}
				},
				showGenderPicker: false,
				showInsurancePicker: false,
				columns: {
					gender: [
						['男', '女']
					],
					insurance: [
						['是', '否']
					]
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			confirmPicker({
				value
			}, key) {
				this.formData[key] = value.join('');
				this[`show${key[0].toUpperCase() + key.slice(1)}Picker`] = false;
			},
			async submit() {
				const valid = await this.$refs.form.validate();

				if (valid) {

					uni.navigateTo({
						url: '/page_venues/pages/venuesDetail/ticketModule/makeOther'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-info {
		background-color: rgb(243, 243, 243);
		min-height: 100vh;
		padding: 30rpx;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		/deep/.u-form {
			background-color: #fff;
			border-radius: 10rpx;

			.u-form-item {
				padding: 0 30rpx;
			}
		}
	}

	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 1;
	}
</style>